<style scoped>
  @import './log.less';
</style>
<template>
  <div>
    <Row>
      <Col span="24">
        <Card style="margin-bottom: 10px">
          <Form inline>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.type" clearable placeholder="请选择类别" style="width:100px">
                <Option value="app_id">标识</Option>
                <Option value="name">名称</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Input v-model="searchConf.keywords" placeholder=""></Input>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <p slot="title" style="height: 32px">
            <Button v-checkPermission="'admin/ClientVersion/add'" type="primary" @click="addModal" icon="md-add">{{ $t('add_button') }}</Button>&nbsp;
          </p>
          <div>
            <Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                  :page-size="tableShow.pageSize" @on-change="changePage"
                  @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert" />
        <span>新增版本</span>
      </p>
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="100">
        <FormItem label="客户端">
          <Select @on-change="changeSelectApp" v-model="selectApp">
            <Option :value="0">新的客户端</Option>
            <Option v-for="(item,i) in appList" :value="item.app_id" :key="i">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem v-if="selectApp==0" label="标识" prop="app_id">
          <Input v-model="formItem.app_id" placeholder="请输入APP_ID"></Input>
        </FormItem>
        <FormItem v-if="selectApp==0" label="名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="版本号" prop="version">
          <Input v-model="formItem.version" placeholder="1.0.0"></Input>
          <Tag color="error" class="margin-left-5">请注意是否与客户端最新版本号同步</Tag>
        </FormItem>
        <FormItem label="增量更新地址" prop="wgt_url">
          <Input v-model="formItem.wgt_url" placeholder="请输入增量更新完整地址URL"></Input>
        </FormItem>
        <FormItem label="整包更新地址" prop="update_url">
          <Input v-model="formItem.update_url" placeholder="请输入整包更新完整地址URL"></Input>
        </FormItem>
        <FormItem label="更新描述" prop="describe">
          <Input type="textarea" :rows="5" v-model="formItem.describe" placeholder="请输入本次的更新内容"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import expandRow from './table_expand.vue'

const deleteButton = (vm, h, currentRow, index) => {
  return h('Poptip', {
    props: {
      confirm: true,
      title: '您确定要删除这条数据吗? ',
      transfer: true
    },
    on: {
      'on-ok': () => {
        vm.$easyAjax({ url: 'ClientVersion/delete/' + (currentRow.id), method: 'delete' }).then(response => {
          vm.getList()
          currentRow.loading = false
        })
      }
    }
  }, [
    h('Button', {
      style: {
        margin: '0 5px'
      },
      props: {
        type: 'error',
        placement: 'top',
        loading: currentRow.isDeleting
      }
    }, vm.$t('delete_button'))
  ])
}

export default {
  name: 'client_version',
  components: { expandRow },
  data () {
    return {
      listLoading: false,
      columnsList: [
        {
          title: 'ID',
          align: 'center',
          key: 'id',
          width: 120
        },
        {
          title: '标识',
          align: 'center',
          key: 'app_id'
        },
        {
          title: '名称',
          align: 'center',
          key: 'name',
          width: 170
        },
        {
          title: '版本号',
          align: 'center',
          key: 'version',
          width: 100
        },
        {
          title: '更新状态',
          align: 'center',
          width: 100,
          render: (h, params) => {
            let vm = this
            return h('i-switch', {
              attrs: {
                size: 'large'
              },
              props: {
                'true-value': 1,
                'false-value': 0,
                value: params.row.status
              },
              on: {
                'on-change': function (status) {
                  vm.$easyAjax({ url: 'ClientVersion/changeStatus/' + (params.row.id), data: { status: status }, method: 'put' }).then(response => {
                    if (response.data.code) {
                      vm.$Message.success(response.data.msg)
                    } else {
                      vm.$Message.error({
                        content: response.data.msg,
                        duration: 10,
                        closable: true
                      })
                    }
                  })
                }
              }
            }, [
              h('span', {
                slot: 'open'
              }, '开启'),
              h('span', {
                slot: 'close'
              }, '关闭')
            ])
          }
        },
        {
          title: '强制更新',
          align: 'center',
          width: 100,
          key: 'is_force',
          render: (h, params) => {
            let vm = this
            return h('i-switch', {
              attrs: {
                size: 'large'
              },
              props: {
                'true-value': 1,
                'false-value': 0,
                value: params.row.is_force
              },
              on: {
                'on-change': function (is_force) {
                  vm.$easyAjax({ url: 'ClientVersion/changeForce/' + (params.row.id), data: { force: is_force }, method: 'put' }).then(response => {
                    if (response.data.code) {
                      vm.$Message.success(response.data.msg)
                    } else {
                      vm.$Message.error({
                        content: response.data.msg,
                        duration: 10,
                        closable: true
                      })
                    }
                  })
                }
              }
            }, [
              h('span', {
                slot: 'open'
              }, '开启'),
              h('span', {
                slot: 'close'
              }, '关闭')
            ])
          }
        },
        {
          title: '描述',
          align: 'center',
          key: 'describe'
        },
        {
          title: '创建时间',
          align: 'center',
          width: 170,
          key: 'create_time'
        },
        {
          title: '操作',
          align: 'center',
          width: 125,
          render: (h, params) => {
            return h('div', [
              deleteButton(this, h, params.row, params.index)
            ])
          }
        }
      ],
      appList: [],
      selectApp: 0,
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      formItem: {
        name: '',
        app_id: '',
        version: 0,
        wgt_url: '',
        update_url: '',
        describe: '修复若干BUG，提升稳定性，建议更新。'
      },
      tableData: [],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        type: '',
        keywords: '',
        status: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        app_id: [
          { required: true, message: '标识不能为空', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '版本号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    changeSelectApp (value) {
      let item = this.formItem
      item.app_id = value
      if (this.appList[value]) {
        item.name = this.appList[value].name
        item.version = this.appList[value].version
        item.wgt_url = this.appList[value].wgt_url
        item.update_url = this.appList[value].update_url
        item.describe = this.appList[value].describe
        this.formItem = item
      }
    },
    addModal () {
      this.modalSetting.show = true
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getList()
    },
    search () {
      this.tableShow.currentPage = 1
      this.getList()
    },
    cancel () {
      this.modalSetting.show = false
    },
    doCancel (data) {
      if (!data) {
        this.formItem.id = 0
        this.$refs['myForm'].resetFields()
        this.modalSetting.loading = false
        this.modalSetting.index = 0
      }
    },
    getList () {
      let vm = this
      let params = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        type: vm.searchConf.type,
        keywords: vm.searchConf.keywords
      }
      vm.listLoading = true
      this.$easyAjax({ url: 'ClientVersion/index', data: params }).then(response => {
        vm.listLoading = false
        vm.tableData = response.data.data.list
        vm.tableShow.listCount = response.data.data.count
        vm.appList = response.data.data.all_app_list
      })
    },
    submit () {
      let vm = this
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          vm.modalSetting.loading = true
          this.$easyAjax({ url: 'ClientVersion/add', data: vm.formItem, method: 'post' }).then(response => {
            if (response.data.code) {
              vm.$Message.success(response.data.msg)
              vm.getList()
              vm.cancel()
            } else {
              vm.$Message.error(response.data.msg)
            }
            vm.modalSetting.loading = false
          }).catch(() => {
            vm.modalSetting.loading = false
          })
        }
      })
    }
  }
}
</script>
